<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>后台管理系统 - demo</title>
    <link href="./css/common.css" rel="stylesheet">
</head>

<body data-logobg="default" data-sidebarbg="default" data-headerbg="default" data-theme="default">
    <div class="layout-container">
        <!--头部信息-->
        <header class="layout-header">
            <nav class="navbar navbar-default">
                <div class="topbar">
                    <div class="topbar-left">
                        <div class="aside-toggler">
                            <span class="toggler-bar"></span>
                            <span class="toggler-bar"></span>
                            <span class="toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 表格布局 </span>
                    </div>
                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-36 m-r-10" src="images/users/avatar.jpg" alt="管理员" />
                                <span>管理员 <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                                <li class="divider"></li>
                                <li> <a href="0_login02.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
                            </ul>
                        </li>
                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--左侧导航-->
        <aside class="layout-sidebar">
            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="main.html"><img src="images/logo-sidebar.png" title="" alt="" /></a>
            </div>
            <div class="layout-sidebar-scroll">
                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item"> <a href="main.html"><i class="mdi mdi-home"></i> 欢迎页</a> </li>

                        <li class="nav-item nav-item-has-subnav active open">
                            <a href="javascript:void(0)"><i class="mdi mdi-palette"></i>示例元素+页面</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="demo01.html">UI元素</a> </li>
                                <li> <a href="0_search.html">搜索框类型</a> </li>
                                <li> <a href="0_card.html">卡片布局</a> </li>
                                <li class="active"> <a href="0_table.html">表格布局</a> </li>
                            </ul>
                        </li>

                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-menu"></i> 多级菜单示例</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="#">一级菜单</a> </li>
                                <li class="nav-item nav-item-has-subnav">
                                    <a href="#">一级菜单</a>
                                    <ul class="nav nav-subnav">
                                        <li> <a href="#">二级菜单</a> </li>
                                        <li class="nav-item nav-item-has-subnav">
                                            <a href="#">二级菜单</a>
                                            <ul class="nav nav-subnav">
                                                <li> <a href="#">三级菜单</a> </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li> <a href="#">一级菜单</a> </li>
                            </ul>
                        </li>
                    </ul>
                </nav>

            </div>

        </aside>
        <!--End 左侧导航-->


        <!--页面主要内容-->
        <main class="layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <!-- 表单 strat-->
                        <div class="card">
                            <div class="card-body">
                                <form class="form-horizontal" method="">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-md-3 col-sm-2  col-xs-2 control-label" for="example-hf-username"><span class="sign">*</span>用户名</label>
                                            <div class="col-md-9 col-sm-10 col-xs-10 ">
                                                <input class="form-control" type="text" id="example-hf-username" name="example-hf-username" placeholder="请输入用户名..">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-md-3 col-sm-2  col-xs-2 control-label" for="example-hf-password">密码</label>
                                            <div class="col-md-9 col-sm-10 col-xs-10 ">
                                                <input class="form-control" type="password" id="example-hf-password" name="example-hf-password" placeholder="请输入密码..">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group m-b-0">
                                            <label class="col-md-3 col-sm-2  col-xs-2 control-label" for="example-hf-password">密码</label>
                                            <div class="col-md-9 col-sm-10 col-xs-10 ">
                                                <input class="form-control" type="password" id="example-hf-password" name="example-hf-password" placeholder="请输入密码..">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- end -->
                        <!-- 表格 strat-->

                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <form class="pull-right search-bar" method="get" action="#" role="form">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <input type="hidden" name="search_field" id="search-field" value="title">
                                            <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
                                                                标题 <span class="caret"></span>
                                                            </button>
                                            <ul class="dropdown-menu">
                                                <li> <a tabindex="-1" href="javascript:void(0)" data-field="title">标题</a> </li>
                                                <li> <a tabindex="-1" href="javascript:void(0)" data-field="cat_name">栏目</a> </li>
                                            </ul>
                                        </div>
                                        <input type="text" class="form-control" value="" name="keyword" placeholder="请输入名称">
                                    </div>
                                </form>
                                <div class="toolbar-btn-action">
                                    <a class="btn btn-primary m-r-5" href="#"><i class="mdi mdi-plus"></i> 新增</a>
                                    <a class="btn btn-success m-r-5" href="#"><i class="mdi mdi-check"></i> 启用</a>
                                    <a class="btn btn-warning m-r-5" href="#"><i class="mdi mdi-block-helper"></i> 禁用</a>
                                    <a class="btn btn-danger" href="#"><i class="mdi mdi-window-close"></i> 删除</a>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <label class="checkbox checkbox-primary"><input type="checkbox" id="check-all"><span></span></label>
                                                </th>
                                                <th>编号</th>
                                                <th>标题</th>
                                                <th>书籍</th>
                                                <th>作者</th>
                                                <th>阅读量</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <label class="checkbox checkbox-primary"><input type="checkbox" name="ids[]" value="1"><span></span></label>
                                                </td>
                                                <td>1</td>
                                                <td>第01章 天涯思君不可忘</td>
                                                <td>《倚天屠龙记》</td>
                                                <td>金庸</td>
                                                <td>36</td>
                                                <td>
                                                    <span class="text-success">正常</span>
                                                </td>
                                                <td>
                                                    <div class="btn-group">
                                                        <a href="0_table_subpage01.html" class="btn btn-xs btn-default" href="#" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                                        <a class="btn btn-xs btn-default" href="#" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label class="checkbox checkbox-primary"><input type="checkbox" name="ids[]" value="2"><span></span></label>
                                                </td>
                                                <td>2</td>
                                                <td>第01章 古道腾驹惊白发，危峦快剑识青翎</td>
                                                <td>《书剑恩仇录》</td>
                                                <td>金庸</td>
                                                <td>44</td>
                                                <td>
                                                    <span class="text-success">正常</span>
                                                </td>
                                                <td>
                                                    <div class="btn-group">
                                                        <a class="btn btn-xs btn-default" href="#" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                                        <a class="btn btn-xs btn-default" href="#" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label class="checkbox checkbox-primary"><input type="checkbox" name="ids[]" value="3"><span></span></label>
                                                </td>
                                                <td>3</td>
                                                <td>一个戴水獭皮帽子的朋友</td>
                                                <td>《湘行散记》</td>
                                                <td>沈从文</td>
                                                <td>39</td>
                                                <td>
                                                    <span class="text-success">正常</span>
                                                </td>
                                                <td>
                                                    <div class="btn-group">
                                                        <a class="btn btn-xs btn-default" href="#" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                                        <a class="btn btn-xs btn-default" href="#" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label class="checkbox checkbox-primary"><input type="checkbox" name="ids[]" value="4"><span></span></label>
                                                </td>
                                                <td>4</td>
                                                <td>你是要灼灼容颜，还是要宜其室家</td>
                                                <td>《诗三百：思无邪》</td>
                                                <td>安意如</td>
                                                <td>36</td>
                                                <td>
                                                    <span class="text-success">正常</span>
                                                </td>
                                                <td>
                                                    <div class="btn-group">
                                                        <a class="btn btn-xs btn-default" href="#" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                                        <a class="btn btn-xs btn-default" href="#" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label class="checkbox checkbox-primary"><input type="checkbox" name="ids[]" value="5"><span></span></label>
                                                </td>
                                                <td>5</td>
                                                <td>海上的消息</td>
                                                <td>《打开心内的窗》</td>
                                                <td>林清玄</td>
                                                <td>32</td>
                                                <td>
                                                    <span class="text-success">正常</span>
                                                </td>
                                                <td>
                                                    <div class="btn-group">
                                                        <a class="btn btn-xs btn-default" href="#" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                                        <a class="btn btn-xs btn-default" href="#" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label class="checkbox checkbox-primary"><input type="checkbox" name="ids[]" value="6"><span></span></label>
                                                </td>
                                                <td>6</td>
                                                <td>楔子 一阕词来 南国清秋魂梦绕 十年人散 绣房红烛剑光寒</td>
                                                <td>《七剑下天山》</td>
                                                <td>梁羽生</td>
                                                <td>42</td>
                                                <td>
                                                    <span class="text-success">正常</span>
                                                </td>
                                                <td>
                                                    <div class="btn-group">
                                                        <a class="btn btn-xs btn-default" href="#" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                                        <a class="btn btn-xs btn-default" href="#" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                                                    </div>
                                                </td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>
                                <ul class="pagination">
                                    <li class="disabled"><span>«</span></li>
                                    <li class="active"><span>1</span></li>
                                    <li><a href="#1">2</a></li>
                                    <li><a href="#1">3</a></li>
                                    <li><a href="#1">4</a></li>
                                    <li><a href="#1">5</a></li>
                                    <li><a href="#1">6</a></li>
                                    <li><a href="#1">7</a></li>
                                    <li><a href="#1">8</a></li>
                                    <li class="disabled"><span>...</span></li>
                                    <li><a href="#">99</a></li>
                                    <li><a href="#">100</a></li>
                                    <li><a href="#">»</a></li>
                                </ul>

                            </div>
                        </div>
                        <!-- end -->
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</body>
<script type="text/javascript" src="js/commonJs.js"></script>
<script>
    $('.search-bar .dropdown-menu a').click(function() {
        var field = $(this).data('field') || '';
        $('#search-field').val(field);
        $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
    });
</script>

</html>